<template>
  <div class="ECharts">
    <div id="myCharts" style="width:100%; height:100%;" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  components: {

  },
  props: {
    orderData: {
      type: Array
    }
  },
  data() {
    return {

    }
  },
  computed: {

  },
  created() {
    // console.log(this.orderData)
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      var myChart = echarts.init(document.getElementById('myCharts'))
      var dataList = []; var seriesOne = []; var seriestwo = []
      this.orderData.forEach(ele => {
        dataList.push(ele.dates)
        seriesOne.push(ele.order)
        seriestwo.push(ele.orderBack)
      })
      var option = {
        title: {
          text: '订单退单柱状图',
          textStyle: {
            color: '#9AA8D4',
            fontSize: 16,
            fontWeight: 'normal'
          }
        },
        tooltip: {},
        legend: {
          data: ['订单', '退单'],
          right: 30,
          textStyle: {
            color: '#A8AAB3', // 坐标值得具体的颜色
            fontSize: 12
          }
        },
        xAxis: {
          data: dataList,
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#A8AAB3', // 左边线的颜色
              width: '1'// 坐标线的宽度
            }
          },
          axisLabel: {
            // 坐标轴字体样式
            rotate: 30,
            textStyle: {
              color: '#A8AAB3', // 坐标值得具体的颜色
              fontSize: 12
            }
          }
        },
        yAxis: {
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '订单',
            type: 'bar',
            data: seriesOne,
            itemStyle: {
              normal: {
                // 渐变柱状图
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#7D05E2' }, // 柱图渐变色
                    { offset: 0.5, color: '#B600FF' }, // 柱图渐变色
                    { offset: 1, color: '#BC04E2' } // 柱图渐变色
                  ]
                )
              }

            }
          },
          {
            name: '退单',
            type: 'bar',
            data: seriestwo,
            itemStyle: {
              normal: {
                // 渐变柱状图
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#24CBFF' }, // 柱图高亮渐变色
                    { offset: 0.5, color: '#24A3FF' }, // 柱图高亮渐变色
                    { offset: 1, color: '#2492FF' } // 柱图高亮渐变色
                  ]
                )
              }

            }
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style scoped lang="scss">
    .ECharts{
        width: 100%;
        height: 100%;
    }
</style>
